<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .login-container {
            background: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
        }

        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .login-header h1 {
            color: #333;
            font-size: 24px;
            margin-bottom: 10px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #555;
            font-weight: bold;
        }

        .form-group input {
            width: 100%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        .form-group input:focus {
            outline: none;
            border-color: #667eea;
        }

        .captcha-container {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .captcha-container input {
            flex: 1;
        }

        .captcha-img {
            border: 1px solid #ddd;
            border-radius: 5px;
            cursor: pointer;
            height: 44px;
        }

        .btn-login {
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .btn-login:hover {
            transform: translateY(-2px);
        }

        .error-message {
            color: #e74c3c;
            text-align: center;
            margin-top: 15px;
            padding: 10px;
            background: #ffeaea;
            border-radius: 5px;
            display: none;
        }

        .footer {
            text-align: center;
            margin-top: 20px;
            color: #666;
        }
    </style>
</head>
<body>
<div class="login-container">
    <div class="login-header">
        <h1>欢迎登录</h1>
        <p>请输入您的账号和密码</p>
    </div>

    <!-- 表单：提交到/doLogin，参数名与后端一致 -->
    <form th:action="@{/doLogin}" method="post">
        <div class="form-group">
            <label for="stuOrTeaId">学号/教职工号</label>
            <input type="text" id="stuOrTeaId" name="stuOrTeaId" required
                   placeholder="请输入学号或教职工号">
        </div>

        <div class="form-group">
            <label for="userPass">密码</label>
            <input type="password" id="userPass" name="userPass" required
                   placeholder="请输入密码">
        </div>

        <div class="form-group">
            <label for="captcha">验证码</label>
            <div class="captcha-container">
                <input type="text" id="captcha" name="captcha" required
                       placeholder="请输入验证码" maxlength="4">
                <img id="captchaImage" class="captcha-img"
                     alt="验证码" onclick="refreshCaptcha()">
            </div>
        </div>

        <button type="submit" class="btn-login">登录</button>
    </form>

    <!-- 错误提示（URL含error=true时显示） -->
    <div id="errorMessage" class="error-message">
        登录失败，请检查账号、密码和验证码
    </div>

    <div class="footer">
        <p>学生信息管理系统</p>
    </div>
</div>

<script>
    // 日志辅助函数（调试用）
    function logStep(step, data) {
        console.log(`[Login Process] ${step}:`, data);
        console.log(`[Login Process] ${step} at:`, new Date().toISOString());
    }

    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        logStep('Page DOM loaded', { url: window.location.href });

        // 初始化验证码
        refreshCaptcha();

        // 检查URL是否含error参数，若有则显示错误提示
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.get('error')) {
            document.getElementById('errorMessage').style.display = 'block';
            logStep('Display error', '登录失败，显示错误提示');
        }
    });

    // 刷新验证码（点击图片也会触发）
    function refreshCaptcha() {
        logStep('Refreshing captcha', '开始请求新验证码');

        // 调用后端/captcha接口获取验证码
        fetch('/captcha')
            .then(response => {
                if (!response.ok) throw new Error('验证码请求失败');
                return response.json();
            })
            .then(data => {
                // 设置图片src为Base64字符串
                document.getElementById('captchaImage').src = data.image;
                logStep('Captcha refreshed', '验证码图片更新成功');
            })
            .catch(error => {
                logStep('Captcha error', error.message);
                alert('获取验证码失败，请刷新页面重试');
            });
    }

    // 表单提交前验证（确保字段不为空）
    document.querySelector('form').addEventListener('submit', function(e) {
        const stuOrTeaId = document.getElementById('stuOrTeaId').value.trim();
        const userPass = document.getElementById('userPass').value.trim();
        const captcha = document.getElementById('captcha').value.trim();

        // 若有字段为空，阻止提交并提示
        if (!stuOrTeaId || !userPass || !captcha) {
            e.preventDefault();
            alert('请填写所有必填字段');
            return false;
        }

        // 字段均不为空，允许提交
        logStep('Form submit', { stuOrTeaId, captchaLength: captcha.length });
    });
</script>
</body>
</html>
